/**
 * Created by JUNYI on 2017-03-26.
 */
function init() {
    var firstMap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        maxZoom: 18
    }).addTo(firstMap);

    // L.tileLayer('http://geohey.com/s/mapping/light/all?z={z}&x={x}&y={y}&ak=OWJiZTM4NTEwNGQ4NGE0ZWI5NjdmYzZkZDk0OWZmM2M', {
    //     maxZoom: 18,
    //     attribution: 'GeoHey &copy; contributors'
    // }).addTo(firstMap);

    // firstMap.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text. Attribution overload
    // add marker
    var marker = L.marker([51.505, -0.09]).addTo(firstMap);
    // add circle
    var circle = L.circle([51.505, -0.09], 500, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(firstMap);
    // add polygon
    var polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.52, -0.04]
    ]).addTo(firstMap);
    // popup
    marker.bindPopup("<b>Hello, Marker</b>");
    circle.bindPopup("Hello, Circle");
    polygon.bindPopup("<b>Hello, Polygon</b>");
    // popup on map
    var popup = L.popup()
        .setLatLng([51.5, -0.09])
        .setContent("(51.5, -0.11)")
        .openOn(firstMap);

    // event handlers
    var mapClickPnt = L.popup();

    function onMapClick(e) {
        mapClickPnt
            .setLatLng(e.latlng)
            .setContent("You clicked at " + e.latlng.toString())
            .openOn(firstMap);
    }

    // bind event handlers
    firstMap.on('click', onMapClick);

    // GeoJson Point
    var geojsonPoint = {
        "type": "Feature",
        "properties": {
            "name": "Coors Field",
            "amenity": "Baseball Stadium",
            "popupContent": "This is where London locates!"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-0.12, 51.51]
        }
    };
    L.geoJson(geojsonPoint).addTo(firstMap);
    // L.geoJson(geojsonPoint, {
    //     pointToLayer: function (geojsonPoint, latlng) {
    //         alert(latlng);
    //         return L.marker(latlng);
    //     }
    // }).addTo(firstMap);

    // GeoJson Lines
    var geojsonLines = [{
        "type": "LineString",
        "coordinates": [[-0.12, 51.5], [-0.20, 51.51], [-0.25, 51.51]]
    }, {
        "type": "LineString",
        "coordinates": [[-0.12, 51.505], [-0.20, 51.505], [-0.25, 51.505]]
    }];
    var myStyle = {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
    };
    L.geoJson(geojsonLines, {
        style: myStyle
    }).addTo(firstMap);

    //GeoJson Polygon
    var states = [{
        "type": "Feature",
        "properties": {"party": "Republican"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [-0.08,51.51],
                [-0.06,51.008],
                [-0.04,51.007],
                [-0.08,51.51]
            ]]
        }
    }, {
        "type": "Feature",
        "properties": {"party": "Democrat"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [-0.08,51.51],
                [-0.23,51.608],
                [-0.27,51.607],
                [-0.08,51.51]
            ]]
        }
    }];
    L.geoJson(states, {
        style: function (feature) {
            switch (feature.properties.party) {
                case 'Republican':
                    return {color: '#ff0000'};
                case 'Democrat':
                    return {color: '#0000ff'};
            }
        }
    }).addTo(firstMap);


}
